<template>
  <j-modal
    title="财务收款登记"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="left-cent">
      <a-spin :spinning="confirmLoading">
        <!-- 主表单区域 -->
        <a-form-model ref="ruleForm"
                      :label-col="labelCol"
                      :model="model"
                      :rules="rules" :wrapper-col="wrapperCol">
          <a-form-model-item label="关键字" placeholder="姓名/订单号/手机号" prop="keyword">
            <a-input
              v-model="model.keyword"
            />
          </a-form-model-item>
          <a-button type="primary" shape="round" @click="querylsit">查询</a-button>
        </a-form-model>
      </a-spin>
      <div class="listinfor">
        <a-table
          :row-selection="rowSelections"
          :columns="columns1"
          :pagination="false"
          :loading="loading"
          :data-source="datas"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </div>
    <div class="right-cent">
      <div>缴费明细</div>
      <div class="mx-top">
        <div>
          <a-table :row-selection="rowSelection" :columns="columns" :pagination="false" :data-source="datas2">
          </a-table>
        </div>
      </div>
    </div>
    <!--<a-button type="primary" @click="saveDraft">暂存</a-button>-->
  </j-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'

  export default {
    name: 'ReturnRefundModel',
    data() {
      return {
        // title: '财务开票收费-购车款（为必填项）',
        visible: false,
        model: {},
        loading: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        showDing: false,
        showEnterpriseUscc: false,
        datas: [
          // {
          //   key: '1',
          //   Unitname: '腾讯',
          //   Vin: '915132184',
          //   costname:'100000',
          //   vehicleReturnNumber:'15',
          // },
          // {
          //   key: '2',
          //   Unitname: '字节跳动',
          //   Vin: '981212318',
          //   costname:'150000',
          //   vehicleReturnNumber:'10',
          // },
          // {
          //   key: '3',
          //   Unitname: '阿里巴巴',
          //   Vin: '845215',
          //   costname:'123000',
          //   vehicleReturnNumber:'11',
          // },
        ],
        datas2: [],
        columns1: [
          {
            title: '序号',
            dataIndex: 'key'
          },
          {
            title: '退款单位名称',
            dataIndex: 'Unitname'
          }
          // {
          //   title: '车辆识别代号',
          //   dataIndex: 'Vin'
          // },
          // {
          //   title: '费用名称',
          //   dataIndex: 'costname'
          // },
          // {
          //   title: '车辆进价(元)',
          //   dataIndex: 'costname'
          // },
          // {
          //   title: '车辆返厂编号',
          //   dataIndex: 'vehicleReturnNumber'
          // },
        ],
        columns: [
          {
            title: '序号',
            dataIndex: 'key'
          },
          {
            title: '退款单位名称',
            dataIndex: 'Unitname'
          },
          {
            title: '车辆识别代号',
            dataIndex: 'Vin'
          },
          {
            title: '费用名称',
            dataIndex: 'expenseName'
          },
          {
            title: '车辆进价(元)',
            dataIndex: 'amount'
          },
          {
            title: '车辆返厂编号',
            dataIndex: 'vehicleReturnNumber'
          }
        ],
        value: ''
      }
    },
    created() {
    },
    computed: {
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          }
        }
      },
      rowSelections() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          }
        }
      }
    },
    methods: {
      changeDepositNotes(val) {
        this.lucy = val
      },
      onChange(checkedValues) {
        console.log('checked = ', checkedValues.target.checked)
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination, filters, sorter)
      },
      next() {

      },
      offset() {

      },
      querylsit() {
        const that = this
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let httpurl = 'https://dzwq.chexinmeng.com/cxmsystem/sale/cxmSaleOrderInfo/searchUnpaidOrder'
            let formData = Object.assign(this.model)
            // formData.date = formData.date ? formData.date.format('YYYY-MM-DD HH:mm:ss') : null
            getAction(httpurl, formData)
              .then((res) => {
                if (res.success) {
                  console.log(res.result)
                  if (this.datas) {
                    this.datas.length = 0
                    res.result.forEach((item, index) => {
                      this.datas.push({
                        key: index + 1,
                        name: item.name,
                        mobile:item.mobile,
                        certNo:item.certNo,
                        orderId: item.orderId
                      })
                    })
                  }
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                // that.close()
              })
          }
        })
      },
      edit(record) {
        // console.log(record)
        // this.form.resetFields()
        // this.model = Object.assign({}, record)
        // console.log(this.model)
        this.visible = true
        this.$nextTick(() => {
          // this.form.setFieldsValue({
          //   batteryNumber: this.model.batteryNumber,
          //   businessAddress: this.model.businessAddress,
          //   carBrand: this.model.carBrand,
          //   carColor: this.model.carColor,
          //   carModel: this.model.carModel,
          //   carType: this.model.carModel,
          //   carTypeConfiguration: this.model.carTypeConfiguration,
          //   carVin: this.model.carVin,
          //   depositAttribute: this.model.depositAttribute,
          //   depositContent: this.model.depositContent,
          //   documentNumber: this.model.documentNumber,
          //   documentType: this.model.documentType,
          //   engineNumber: this.model.engineNumber,
          //   enterpriseId: this.model.enterpriseId,
          //   enterpriseName: this.model.enterpriseName,
          //   enterpriseUscc: this.model.enterpriseUscc,
          //   epositAmount: this.model.epositAmount,
          //   fuelType: this.model.fuelType,
          //   importEngineNumber: this.model.importEngineNumber,
          //   importProveNumber: this.model.importProveNumber,
          //   interiorColor: this.model.interiorColor,
          //   isNewCar: this.model.isNewCar,
          //   orderDate: this.model.orderDate ? moment(this.model.orderDate) : null,
          //   orderNumber: this.model.orderNumber,
          //   operationAddr: this.model.operationAddr,
          //   ownerName: this.model.ownerName,
          //   ownerPhone: this.model.ownerPhone,
          //   qualifiedNumber: this.model.qualifiedNumber,
          //   quoteAmount: this.model.quoteAmount,
          //   registerDistinct: this.model.registerDistinct,
          //   salesName: this.model.salesName,
          //   salesPhone: this.model.salesPhone
          // })
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {

          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add

              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            //时间格式化
            formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null

            httpAction(httpurl, formData, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
                that.close()
              })
          }
        })
      },
      saveDraft() {
        const that = this
        this.form.validateFields((err, values) => {
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
          let httpurl = this.url.saveDraft

          console.log(JSON.stringify(formData))
          let Data = {}
          Data.btype = 'order'
          Data.content = JSON.stringify(formData)
          console.log(Data)
          httpAction(httpurl, Data, 'post')
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        })

      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>


  /deep/ .ant-modal-body {
    display: flex;
    .left-cent {
      flex: 0.5;
      padding-left: 20px;
      padding-right: 20px;
      .ant-form {
        padding-top: 5px;
        display: flex;
        .ant-btn {
          margin-top: 3px;
        }
      }
      .listinfor {
        border: 1px solid #dddddd;
        overflow: hidden;
        .ant-table-wrapper {
          /*width: 125%;*/
        }
      }
    }
    .right-cent {
      flex: 1;
      padding: 20px;
      .mx-top {
        overflow: scroll;
        .ant-table-wrapper {
          width: 100%;
        }
      }
    }
    .mx-center {
      border: 1px solid #aaaaaa;
      padding: 15px;
      display: flex;
      margin-top: 10px;
      .let {
        display: flex;
        flex: 1;
      }
      .cent {
        display: flex;
        flex: 1;
      }
      .rig {
        display: flex;
        flex: 1;
      }
    }
    .mx-bot {
      border: 1px solid #aaaaaa;
      padding: 2px 10px 10px 10px;
      margin-top: 10px;
      .mx-infor {
        margin-top: 10px;
        display: flex;
        .let {
          display: flex;
          flex: 1;
          line-height: 30px;
        }
        .cent {
          display: flex;
          flex: 1;
          line-height: 30px;
        }
        .rig {
          display: flex;
          line-height: 30px;
          .tit {
            width: 70px;
          }
          .ant-input {
            width: 120px
          }
        }
      }
      .bzinfor {
        display: flex;
        .tit {
          width: 70px;
        }
        .ant-input {
          height: 100px;
        }
      }
      .payment {
        margin-top: 10px;
        display: flex;
        .pay-let {
          display: flex;
          flex: 1;
          .ant-select {
            width: 100px;
            margin-left: 5px;
          }
        }
        .pay-cen {
          flex: 1;
          padding-top: 5px;
          span {
            color: red;
          }
        }
        .pay-but {
          padding-left: 470px;
          .ant-btn {
            border-radius: 15px;
            margin: 10px;
          }
        }
      }
    }
  }
</style>